<template>
	<div style="position: absolute; left: 0; top: 0; z-index: 0">
		<Particles
			id="tsparticles"
			:particlesInit="particlesInit"
			:particlesLoaded="particlesLoaded"
			:options="options" />
		<div class="login-container">
			<div class="login-bg"></div>
			<el-form class="login-form" label-width="100px" label-position="left">
				<h2 class="login-title">登录</h2>
				<div class="form-group">
					<el-form-item label="用户名称">
						<el-input v-model="username" :prefix-icon="User" />
					</el-form-item>
				</div>
				<div class="form-group">
					<el-form-item label="用户密码">
						<el-input v-model="password" type="password" :prefix-icon="Lock" />
					</el-form-item>
					<!-- <label for="password">密码</label>
					<input type="password" id="password" v-model="password" /> -->
				</div>
				<div class="form-group">
					<el-form-item label="验证码">
						<el-input v-model="code" :prefix-icon="Lock" class="captcode">
							<template #append>
								<canvas
									ref="captchaCanvas"
									width="80"
									height="32"
									@click="generateCaptcha"></canvas>
							</template>
						</el-input>
					</el-form-item>
				</div>
				<el-button class="login-btn" type="primary" @click="login">登录</el-button>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
//引入vue
import { reactive, ref, onMounted } from 'vue'
import { loadFull } from 'tsparticles'
import type { Engine } from 'tsparticles-engine'

const particlesInit = async (engine: Engine) => {
	await loadFull(engine)
}

const particlesLoaded = async (container: any) => {
	console.log('Particles container loaded', container)
}
const options = reactive({
	background: {
		color: {
			value: '#000' // 粒子颜色
		}
	},
	fpsLimit: 60,
	interactivity: {
		events: {
			onClick: {
				enable: true,
				mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。
			},
			onHover: {
				enable: true,
				mode: 'repulse' // 可用的hover模式有: "grab", "repulse", "bubble"。
			},
			resize: true
		},
		modes: {
			bubble: {
				distance: 400,
				duration: 2,
				opacity: 0.8,
				size: 40
			},
			push: {
				quantity: 4
			},
			repulse: {
				distance: 200,
				duration: 0.4
			}
		}
	},
	particles: {
		color: {
			value: '#ffffff'
		},
		links: {
			color: '#ffffff', // '#dedede'。线条颜色。
			distance: 150, // 线条长度
			enable: true, // 是否有线条
			opacity: 0.5, // 线条透明度。
			width: 1 // 线条宽度。
		},
		collisions: {
			enable: false
		},
		move: {
			direction: 'none',
			enable: true,
			outMode: 'bounce',
			random: false,
			speed: 2, // 粒子运动速度。
			straight: false
		},
		number: {
			density: {
				enable: true,
				area: 800
			},
			value: 80 // 粒子数量。
		},
		opacity: {
			value: 0.5 // 粒子透明度。
		},
		shape: {
			type: 'circle' // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
		},
		size: {
			random: true,
			value: 2 // 粒子大小。
		}
	},
	detectRetina: true
})
const username = ref('admin')
const password = ref('123456')
const code = ref('')
const captchaCanvas = ref(null)
const generatedCaptcha = ref('')
const router = useRouter()

const generateCaptcha = () => {
	// 生成一个包含大写字母和数字的随机验证码
	const chars = '0123456789'
	const captchaLength = 4
	generatedCaptcha.value = Array.from(
		{ length: captchaLength },
		() => chars[Math.floor(Math.random() * chars.length)]
	).join('')

	// 绘制验证码到 Canvas 上
	const canvas = captchaCanvas.value
	const ctx = canvas.getContext('2d')
	ctx.clearRect(0, 0, canvas.width, canvas.height)

	// 设置背景颜色和样式
	ctx.fillStyle = 'black'
	ctx.fillRect(0, 0, canvas.width, canvas.height)

	// 添加一些科技感十足的元素
	const numParticles = 6
	for (let i = 0; i < numParticles; i++) {
		const x = Math.random() * canvas.width
		const y = Math.random() * canvas.height
		const size = Math.random() * 3 + 1
		const color = '#606266'
		drawParticle(ctx, x, y, size, color)
	}

	// 设置文字颜色和样式
	ctx.font = '20px Arial'
	ctx.fillStyle = 'white'
	ctx.textBaseline = 'middle'
	ctx.textAlign = 'center'
	ctx.fillText(generatedCaptcha.value, canvas.width / 2, canvas.height / 2) // 居中绘制验证码
}

const drawParticle = (ctx, x, y, size, color) => {
	ctx.beginPath()
	ctx.arc(x, y, size, 0, Math.PI * 2)
	ctx.fillStyle = color
	ctx.fill()
}

const login = () => {
	if (
		username.value == 'admin' &&
		password.value == '123456' &&
		code.value === generatedCaptcha.value
	) {
		localStorage.setItem('isLogin', 'true')
		router.push('/')
	}
	// 处理登录逻辑，例如向后端发送登录请求
	// console.log('登录成功')
}

onMounted(() => {
	generateCaptcha()
})
</script>
<style>
.login-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-form {
	width: 360px;
	padding: 40px;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 1; /* 将表单置于背景图上层 */
}

.login-title {
	text-align: center;
	margin-bottom: 20px;
	color: #333;
	font-size: 24px;
	font-weight: bold;
}

.form-group {
	margin-bottom: 20px;
}

label {
	display: block;
	font-size: 14px;
	color: #555;
}

input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.login-btn {
	width: 100%;
	padding: 12px;
	/* background-color: #4caf50; */
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
</style>
<style lang="scss" scoped>
:deep(.el-input-group__append) {
	padding: 0 !important;
}
</style>
